<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前台 </title>
    <link th:href="@{/layer/css/layui.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div th:replace="~{commons/commons::topdao}"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table id="tabBill" layui-filter="tabBill"></table>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}" ></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/layer/layui.js}"></script>
<script>
var tabalBill,layer;

    $(function () {

        layui.use(['layer','table'],function () {
            layer = parent.layer === undefined ? layui.layer : parent.layer,layuiTable = layui.table;
            tabalBill = layuiTable.render({
                elem: "#tabBill",
                cols: [
                    [
                        { type: 'numbers', title: '序号' },//序号列，title设定标题名称
                        { field: 'billid', title: 'ID'},
                        { field: 'billnumber', title: '账单号', width: 98 },
                        { field: 'clientname', title: '客户名称', width: 98 },
                        { field: 'diningnumber', title: '餐桌', width: 98 },
                        { field: 'billtime', title: '下单时间', width: 255 },
                        {title: '操作',width: 221, templet: ListBill, align: "center"},
                        {type: "checkbox", width: 70},
                    ]
                ],
                id: "Listtable",
                page: true,
                data: [],
                height: "full-180",
                limit: 6,
                limits: [6, 12, 18, 24],
                done: function (res, curr) {
                    var currPage = curr; // 获得当前页码
                    var dataLength = res.data.length; // 获得当前页的记录数
                    var count = res.count; // 获得总记录数
                    if (dataLength == 0 && count != 0) { //如果当前页的记录数为0并且总记录数不为0
                        layuiTable.reload("ListTable", { // 刷新表格到上一页
                            page: {
                                curr: currPage - 1
                            }
                        });
                    }
                }
            });
            SearchBill();
        });
    });
    function SearchBill() {
        tabalBill.reload({
            url: "/billtable/SearchBill",
            page: {
                curr: 1
            }
        });
    }
    function ListBill(data) {
        var billid = data.billid;
        var btns = "";
        btns +='<button type="button" class="btn btn-warning btn-sm"  style="border: none; margin:3px;height:25px;cursor: pointer;" onclick=openToBill('+billid+')>结账</button>'
        return btns;
    }
    function openToBill(billid) {
        var Billid = billid;

            var index = layer.open({
                title: "宾客清单",
                type: 2,
                area: ['800px', '600px'],
                content: "/billtable/OutBill?billid=" + Billid,
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    //tip提示：如何关闭iframe层
                    setTimeout(function () {
                        layer.tips('点击此处返回账单列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: [3, '#FFB800'],
                            time: 2000
                        });
                    }, 500)
                }
            });
            $(window).on("resize", function () {
                layer.full(index);
            });

    }
</script>
</body>
</html>